<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="format-detection" content="telephone=no">
  <title>发布文章</title>
  <link rel="stylesheet" href="./static/layui/css/layui.css">
  <link rel="stylesheet" href="./static/css/common.css">
  <link href="https://unpkg.com/@wangeditor/editor@latest/dist/css/style.css" rel="stylesheet">
  <style>
    #editor—wrapper {
      border: 1px solid #ccc;
      z-index: 100;
      /* 按需定义 */
    }

    #toolbar-container {
      border-bottom: 1px solid #ccc;
    }

    #editor-container {
      height: 300px;
    }
  </style>

</head>

<body>
  <header class="layui-bg-cyan">
    <nav class="layui-container">
      <div class="layui-row">
      </div>
    </nav>
  </header>

  <div class="layui-card">
    <div class="layui-card-body">
      <form class="layui-form" action="">
        <div class="layui-form-item">
          <label class="layui-form-label">文章标题</label>
          <div class="layui-input-block">
            <input type="text" name="title" placeholder="请输入标题" autocomplete="off" class="layui-input title">
          </div>
        </div>
        <div class="layui-form-item">
          <label class="layui-form-label">文章分类</label>
          <div class="layui-input-block">
            <select class="categoryId">


            </select>
          </div>
        </div>
        <div class="layui-form-item">
          <label class="layui-form-label">封面地址</label>
          <div class="layui-input-block">
            <input type="text" name="title" placeholder="请输入封面地址" autocomplete="off" class="layui-input coverImg">
          </div>
        </div>
        <div class="layui-form-item">
          <label class="layui-form-label">文章摘要</label>
          <div class="layui-input-block">
            <input type="text" name="title" placeholder="请概述文章" autocomplete="off" class="layui-input description">
          </div>
        </div>
        <div class="layui-form-item layui-form-text">
          <label class="layui-form-label">文章内容</label>
          <div class="layui-input-block">
            <div id="editor—wrapper">
              <div id="toolbar-container">
                <!-- 工具栏 -->
              </div>
              <div id="editor-container">
                <!-- 编辑器 -->
              </div>
            </div>
          </div>
        </div>

        <div class="layui-form-item">
          <div class="layui-input-block">
            <button class="layui-btn submit" lay-submit lay-filter="formDemo">立即提交</button>
            <button class="layui-btn back" lay-submit lay-filter="formDemo">返回主页</button>
          </div>
        </div>
      </form>
    </div>
  </div>


  <!-- 尾部 -->
  <div class="footer"></div>
  <footer class="layui-bg-cyan">
    <div class="layui-container">
      <div class="layui-row">
        <p>本站部分内容来源于网络，若侵犯到您的利益，请联系站长删除！谢谢！Powered By <a href="https://gitee.com/XzcGroup/XzcBlogTemplate"
            target="_blank" title="XzcBlogTemplate">XzcBlogTemplate</a></p>
      </div>
    </div>
  </footer>
</body>
<script src="./static/layui/layui.all.js"></script>
<script src="./baseAPI.js"></script>
<!-- <script src="./asset/js/common.js"></script> -->
<script src="https://unpkg.com/@wangeditor/editor@latest/dist/index.js"></script>
<script src="./asset/js/article.js"></script>
<script>
  const { createEditor, createToolbar } = window.wangEditor

  const editorConfig = {
    placeholder: 'Type here...',
    onChange(editor) {
      const html = editor.getHtml()
      //console.log('editor content', html)
      // 也可以同步到 <textarea>
    }
  }

  const editor = createEditor({
    selector: '#editor-container',
    html: '<p><br></p>',
    config: editorConfig,
    mode: 'default', // or 'simple'
  })

  const toolbarConfig = {}

  const toolbar = createToolbar({
    editor,
    selector: '#toolbar-container',
    config: toolbarConfig,
    mode: 'default', // or 'simple'
  })
</script>

<!-- <script>
  var E = window.wangEditor; // 全局变量
</script> -->

</html>